<template>
  <div class="remarks-style">
    <div class="close-box" :class="{'close-2':isMobile}" @click="store.setChildRemarksShow(false)">
      <!-- <i class="doorIcon">&#xe63d;</i> closeIconBox-->
      <img 
     
      :src="publicUrls + 'free/style3/closeIconBox.webp'" alt="" />
    </div>

    <div
      class="remarks-style-conetnt"
      :style="{ backgroundImage: `url(${publicUrls + 'free/style3/scrollBcakground1.webp'})` }"
    >
      <div class="remarks-style-left">
        <p class="title">{{ store.childTitle }}</p>
        <p class="subtitle">{{ store.childSubTitle ? '——' : '' }}{{ store.childSubTitle }}</p>
        <scrollBox
          color="rgba(50, 43, 37, 1)"
          :scrollSrc="publicUrls + 'free/style3/pen.png'"
          v-if="Scrollheights"
          :remarks="store.childRemarks"
          :byid="100"
          :height="getScrollWComputed"
        >
          <template #solidBorder>
            <div class="solidBorder-child"></div>
          </template>
        </scrollBox>
      </div>
    </div>
  </div>
</template> 

<script lang="ts">
export default defineComponent({
  name: 'styleOne',
});
</script>

<script setup lang="ts">
import { getMobileType } from '@/utils/getMoble';
import { publicUrls } from '@/utils/minxin';
import scrollBox from '../scrollBox.vue';
import { useProjectStore } from '@/store';
import { ref, computed, defineComponent } from 'vue';

const isMobile = ref(false);  
isMobile.value = getMobileType();
const store = useProjectStore(); 
let viewportHeight = window.innerHeight; 
const Scrollheights = ref();
Scrollheights.value = (viewportHeight / 900) * 526;
const getScrollWComputed = computed(() => {
  if (store.isMobileType) {
    let rootNode = document.documentElement;

    // 获取计算后的样式
    let computedStyle = window.getComputedStyle(rootNode);

    // 读取字体大小（注意这里返回的可能是一个包含单位的字符串，如"16px"）
    let fontSize = computedStyle.fontSize;

    // 如果你需要一个数字值（不带单位）进行计算，你可能需要解析这个字符串
    // 例如，使用正则表达式或split()方法去除单位，并将结果转换为数字
    let fontSizeNumber = parseFloat(fontSize.replace(/[^0-9.-]/g, ''));
    // let heights = (fontSizeNumber / 144)
    let heights = (fontSizeNumber / 144) * 526;
    return heights;
  } else {
    return Scrollheights.value;
  }
});
</script>   

<style scoped lang="less">
.remarks-style {
  display: flex;
  flex-direction: column;
  position: relative;
  //   width: 100%;
  //   max-width: 1200px;
  width: 1200px;
  height: 720px;
  background: transparent;

  transform: translateZ(0px);
}
.remarks-style-conetnt {
  display: flex;
  width: 100%;
  height: 100%;
  //   background: #fff;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  padding-top: 32px;
  //   object-fit: contain;
}
.title {
  width: 100%; 
  font-family: SourceBold;
  font-size: 24px;
  color: #e1dcd3;
  line-height: 30px; 
  text-align: center; 
}
.subtitle {
  width: 100%;
  margin-top: 56px;
  height: 24px;
  margin-bottom: 16px; 
  text-align: center;
  font-family: SourceMedium;
  font-size: 18px;
  color: #2f1b16;
  line-height: 24px;
  opacity: 0.8;
}
.remarks-style-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding-left: 92px;
  padding-right: 62px;
  height: 100%;
}
.solidBorder-child {
  width: 4px;
  height: 100%;
  border-radius: 1.055px;
  opacity: 0.2;
  background: #623333;
  box-sizing: border-box;
  border-radius: 2px;
  //   border-left: 2px solid rgba(81, 81, 81, 1);
  //   border-right: 2px solid rgba(81, 81, 81, 1);
}

.close-box {
  cursor: pointer;
  display: flex;
  align-items: center; 
  justify-content: center;
  position: absolute;
  top: 36px;
  right: 38px;
  width: 24px;
  height: 24px;

 
  z-index: 30;
  img{
    width: 24px;  
    height: 24px;
  }  
}
.close-2{
cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 32px;
  right: 38px;
  width: 32px;
  height: 32px;

 
  z-index: 30;
  img{
    width: 32px;  
    height: 32px;
  }
}
::v-deep .templatestyle1-scroll-box-tumb {
  align-items: center;
  justify-content: center;
  img {
    width: 24px;
    height: 24px;
  }
}
::v-deep {
  .solid-box-parent {
    width: 32px;
  }
  .unit-exbi-remarks-info-remarks {
    width: calc(100% - 32px);
    
  }
}
 :deep(.unit-exbi-remarks-info-remarks p) {
    
   
      font-weight: 400;
      font-size: 16px !important;
      color: rgba(47, 27, 22, .6) !important;
      line-height: 32px !important;
     
  } 
   
</style>
